<!--配送商端--退货管理--采购退货订单-->
<template>
  <div class="purchase-return">
    <el-container class="template-box">
      <!-- tab搜索 -->
      <tabs
        class="tabs-part"
        :tabs-arr="indexTabsArr"
        @returnIndex="tabsHandle" />
      <!-- 搜索 -->
      <el-header height="auto">
        <!-- @resetForm="resetForm" -->
        <SearchForm
          label-width="140px"
          :data="indexSearchData"
          @searchForm="searchForm"
          :show-collapse='true'
          :compact-data='searchCompactData'
          :submit-loading='submitLoading'
        />
      </el-header>
      <!-- 列表 -->
      <el-editable
        v-loading="tableLoading"
        :data="tableData"
        :columns="columns"
        height='400'>
        <!-- 操作 -->
        <template
          slot="default-action"
          slot-scope="{ row }">
          <el-button
            size="small"
            @click.stop="handleOperationRecordClick(row)"
            type="text">操作记录</el-button>
          <el-button
            size="small"
            @click.stop="handleAuditClick(row)"
            type="text text-primary">审核</el-button>
          <el-button
            size="small"
            type="text text-primary"
            @click="handleReceivingGoodsClick(row)">收货</el-button>
          <el-button
            size="small"
            @click.stop="toDetails(row)"
            type="text">详情</el-button>
        </template>
      </el-editable>
      <!-- 分页模块 -->
      <el-pagination
        align='right'
        style="margin-top: 10px;"
        @size-change="sizeChange"
        @current-change="pageChange"
        :current-page="page.page"
        :page-sizes="PAGE_NUMBER"
        :page-size="page.size"
        :layout="PAGINATION_LAYOUT"
        :total="page.total"
      />
    </el-container>
    <dialog-operation-record
      :id='curRowId'
      :visible='dialogVisible'
      @closeDialog='closeDialog'/>
  </div>
</template>
<script>
import { getReturnList } from '@const/beforeSettleApi'
import tabs from '@components/tabs/index.vue'
import ElEditable from '@components/el-editable'
import paginationMixin from '@mixins/paginationMixin'
import SearchForm from '@components/businesscomponents/search'
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common'
import { indexSearchData, indexTableColumns as columns, indexTabsArr } from './const'
import DialogOperationRecord from '@/moduleComponents/beforeSettle/dialog-operation-record'
export default {
  mixins: [ paginationMixin ],
  components: { ElEditable, SearchForm, tabs, DialogOperationRecord },
  data () {
    return {
      submitLoading: false,
      curRowId: '',
      dialogVisible: false,
      // 搜索标题字段
      indexSearchData,
      searchCompactData: indexSearchData.slice(0, 2),
      // 搜索返回内容
      searchData: {},
      // 表格loading
      tableLoading: false,
      // 列表数据
      tableData: [],
      // 列表表头
      columns,
      // tab字段
      tabIndexVal: null,
      indexTabsArr,
      PAGE_NUMBER, // 页码数组
      PAGINATION_LAYOUT // 页码功能布局
    }
  },
  created () {
    // this.getItems()
  },
  methods: {
    // 获取列表
    getItems (page = this.page.page, pageSize = this.page.size) {
      this.submitLoading = true
      this.tableLoading = true
      this.$axios.post(getReturnList, { ...this.searchData, orderStatus: this.tabIndexVal, page, pageSize })
        .then(({ data }) => {
          if (Number(data.code)) return
          this.tableData = data.payload.content || []
          this.page.total = data.payload.totalElements
        })
        .finally(() => {
          this.tableLoading = false
          this.submitLoading = false
        })
    },
    // tabs切换处理事件
    tabsHandle (index) {
      const val = this.indexTabsArr[index].val
      this.tabIndexVal = Object.is(val, 'null') ? null : val
      // 列表
      this.pageReset()
    },
    // 跳转详情
    toDetails ({ id }) {
      this.$router.push({
        path: '/distributorSide/returnOrderManage/purchaseReturn/detail',
        query: { id }
      })
    },
    // 操作记录按钮
    handleOperationRecordClick ({ id }) {
      this.curRowId = id
      this.dialogVisible = true
    },
    closeDialog () {
      this.dialogVisible = false
    },
    // 审核按钮
    handleAuditClick ({ id }) {
      console.log('审核按钮点击事件')
    },
    // 去收货
    handleReceivingGoodsClick ({ id }) {
      this.$router.push({
        path: '/distributorSide/returnOrderManage/purchaseReturn/take',
        query: { id }
      })
    },
    // 搜索功能-点击查询
    searchForm (condition) {
      this.searchData = condition
      this.pageReset()
    }
  }
}
</script>
<style lang="less">
.purchase-return {
  .template-box {
    height: 100%;
    overflow: auto;
  }
}
</style>
